// eslint-disable-next-line no-unused-vars
import VXETable, { Column } from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

const Bem = createBem(`${tableNamespace}__drop-down-menu`)

VXETable.renderer.add('DropDownMenu', {
  renderDefault(h, renderOpts, params) {
    const { row, column } = params
    /**
     * @typedef { object } List
     * @property { string } value
     * @property { Array<string> } button
     */
    /**
     * @type { {menuName:string; list:Array<List>;} }
     */
    const { list = [], events = {}, options = {} } = renderOpts
    const { menuName = '操作' } = options
    const { onClick } = events
    /**@type { Array<string> } */
    const currentStatus = row[column.property]

    const selected = Array.isArray(currentStatus)
      ? currentStatus
      : currentStatus.split(',') || []

    const controlList = list.map(
      i => i.button[Number(selected.includes(i.value))]
    )

    function handleCommand(command) {
      onClick?.({ command, row, column })
    }
    return [
      <el-dropdown class={Bem()} size={this.$store.getters.size} onCommand={handleCommand}>
        <span class={Bem('link')}>
          {menuName}
          <i class="el-icon-arrow-down" />
        </span>
        <el-dropdown-menu>
          {controlList.map(i => (
            <el-dropdown-item key={i} command={i}>
              {i}
            </el-dropdown-item>
          ))}
        </el-dropdown-menu>
      </el-dropdown>
    ]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'ellipsis',
  align: 'center'
}
